<template>
    <div class="page">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-profile"></i> 教师管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button @click="handleAdd" class="btn-add" icon="el-icon-lx-add" type="success">新增</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" v-loading="loading">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
                <el-table-column prop="name" label="姓名" width="80"></el-table-column>

                <el-table-column label="头像" align="center" width="120">
                    <template slot-scope="scope">
                        <el-image class="table-td-thumb" :src="scope.row.image" :preview-src-list="[scope.row.image]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="phone_number" width="110" label="手机号"></el-table-column>
                <el-table-column width="80" label="性别">
                    <template slot-scope="scope">
                        {{ scope.row.gender == '0' ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column prop="college.college_name" width="200" label="所属学院"></el-table-column>
                <el-table-column prop="family_address" label="家庭住址"></el-table-column>
                <el-table-column prop="graduate_schoole" label="毕业院校"></el-table-column>
                <el-table-column prop="entry_time" label="入职年份"></el-table-column>
                <el-table-column prop="title.title" label="职称"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, prev, pager, next"
                    :current-page="currentPage"
                    :page-size="itemOfPage"
                    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                    :page-count="totalPages"
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 新增教师dialog -->
        <el-dialog title="新增教师" :visible.sync="addVisible" width="34%" :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="70px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone_number">
                    <el-input v-model="form.phone_number" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select v-model="form.gender" placeholder="性别">
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属学院" prop="college.college_id">
                    <el-select v-model.number="form.college.college_id" placeholder="所属学院">
                        <el-option
                            v-for="college in colleges"
                            :key="college.college_id"
                            :label="college.college_name"
                            :value="college.college_id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="家庭住址" prop="family_address">
                    <el-input v-model="form.family_address" placeholder="家庭住址"></el-input>
                </el-form-item>
                <el-form-item label="毕业院校" prop="graduate_schoole">
                    <el-input v-model="form.graduate_schoole" placeholder="毕业院校"></el-input>
                </el-form-item>
                <el-form-item label="入职年份" prop="entry_time">
                    <el-date-picker :picker-options="checkDate" v-model="form.entry_time" value-format="yyyy" format="yyyy" type="year" placeholder="入职时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="职称" prop="title.id">
                    <el-select v-model="form.title.id" placeholder="职称">
                        <el-option v-for="title in titles" :key="title.id" :label="title.title" :value="title.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="照片" prop="image">
                    <el-upload
                        action=""
                        list-type="picture-card"
                        :class="{ hide: !uploadVisible }"
                        :limit="1"
                        :file-list="fileList"
                        :http-request="handleUpload"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑教师dialog -->
        <el-dialog title="编辑教师" :visible.sync="editVisible" width="34%" :close-on-click-modal="false">
            <el-form ref="form" :model="editForm" :rules="rules" label-width="70px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="editForm.name" placeholder="姓名" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone_number">
                    <el-input v-model="editForm.phone_number" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select v-model="editForm.gender" placeholder="性别" disabled>
                        <el-option label="男" value="0"></el-option>
                        <el-option label="女" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属学院" prop="college.college_id">
                    <el-select v-model.number="editForm.college.college_id" placeholder="所属学院">
                        <el-option
                            v-for="college in colleges"
                            :key="college.college_id"
                            :label="college.college_name"
                            :value="college.college_id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="家庭住址" prop="family_address">
                    <el-input v-model="editForm.family_address" placeholder="家庭住址"></el-input>
                </el-form-item>
                <el-form-item label="毕业院校" prop="graduate_schoole">
                    <el-input v-model="editForm.graduate_schoole" placeholder="毕业院校" disabled></el-input>
                </el-form-item>
                <el-form-item label="入职年份" prop="entry_time">
                    <el-date-picker disabled format="yyyy" v-model="editForm.entry_time" type="month" placeholder="入职时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="职称" prop="title.id">
                    <el-select v-model="editForm.title.id" placeholder="职称">
                        <el-option v-for="title in titles" :key="title.id" :label="title.title" :value="title.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="照片" prop="image">
                    <el-upload
                        action=""
                        list-type="picture-card"
                        :class="{ hide: !uploadVisible }"
                        :limit="1"
                        :file-list="fileList"
                        :on-remove="handleRemoveImg"
                        :http-request="handleUpload"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getRequest, postRequest } from '@/api/index';
import { handleUploadImg } from '@/utils/upload';

export default {
    name: 'ManageTeacher',
    components: {},
    data() {
        return {
            addVisible: false,
            editVisible: false,
            uploadVisible: true,
            dialogImgUrl: '',
            tableData: [],
            colleges: [],
            titles: [],
            form: {
                id: '',
                name: '',
                phone_number: '',
                gender: '1',
                graduate_schoole: '',
                family_address: '',
                entry_time: '',
                college: {},
                image: '',
                title: {}
            },
            editForm: {
                college: {},
                title: { id: 1 },
                term: 0
            },
            fileList: [],
            loading: false,
            currentPage: 1,
            itemOfPage: 10,
            totalPages: 5,
            rules: {},
            // 用于限制日期选择
            checkDate: {
                disabledDate: time => {
                    // 今天之后的年不能选
                    let now = new Date();
                    return time.getFullYear() > now.getFullYear();
                }
            }
        };
    },
    created() {
        this.getTeacherData();
        this.getCollegeData();
        this.getTitleData();
    },
    methods: {
        // 获取所有教师信息
        getTeacherData() {
            let that = this;
            this.loading = true;
            getRequest('/login/admin/teacher/getteainfo', {current_page: this.currentPage, itemsofpage: this.itemOfPage}, global.CONTENT_TYPE_URLENCODED).then(
                res => {
                    that.tableData = res.data.content;
                    that.totalPages = res.data.total_pages;
                    that.loading = false;
                },
                err => {}
            );
        },
        // 获取所有学院信息
        getCollegeData() {
            let that = this;
            getRequest('/public/baseinfo/college/getall').then(res => {
                console.log(res);
                that.colleges = res.data;
            });
        },
        // 获取所有职称信息
        getTitleData() {
            let that = this;
            getRequest('/public/baseinfo/title/getall').then(res => {
                that.titles = res.data;
            });
        },
        // 新增教师
        saveAdd() {
            postRequest('/login/admin/teacher/insertteainfo', this.form).then(res => {
                if (res.code == 200) {
                    this.$message.success('新增教师成功!');
                    this.getTeacherData();
                    this.addVisible = false;
                }
            });
        },
        // 更新教师信息
        saveEdit() {
            postRequest('/login/admin/teacher/updateteainfo', this.editForm).then(
                res => {
                    if (res.code == 200) {
                        this.$message.success('修改教师信息成功!');
                        this.getTeacherData();
                        this.editVisible = false;
                    } else {
                        this.$message.error('修改教师信息失败!');
                    }
                },
                err => {}
            );
        },
        handleUpload(item) {
            handleUploadImg(item).then(res => {
                if (res.code == 200) {
                    this.$message.success('图片上传成功！');
                    this.dialogImgUrl = res.data.url;
                    this.form.image = res.data.url;
                    this.editForm.image = res.data.url;
                    // 上传后隐藏
                    this.uploadVisible = false;
                } else {
                    this.$message.error('上传超出大小限制！');
                }
            });
        },
        handleRemoveImg() {
            this.uploadVisible = true;
            this.editForm.image = null;
        },
        handleAdd() {
            this.addVisible = true;
            this.fileList = [];
            this.uploadVisible = true;
        },
        handleEdit(index, row) {
            // 重置
            this.fileList = [];
            // 隐藏 + 号
            if (row.image) {
                this.uploadVisible = false;
                this.fileList.push({ name: 'image', url: row.image });
            } else {
                this.uploadVisible = true;
            }
            if (!row.title) {
                row.title = {};
            }
            // 防止同步修改
            this.editForm = JSON.parse(JSON.stringify(row));
            this.editVisible = true;
        },
        handleDelete(index, row) {
            this.$confirm('确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    postRequest('/login/admin/teacher/deleteteainfo', { id: row.id }, global.CONTENT_TYPE_URLENCODED).then(
                        res => {
                            console.log(res);
                            if (res.code == 200) {
                                this.$message.success('删除成功!');
                                // 删除指定位置
                                this.tableData.splice(index, 1);
                            }
                        },
                        err => {}
                    );
                })
                .catch(() => {
                    this.$message.info('已取消');
                });
        },
        // 分页尺寸修改
        handleSizeChange(size) {
            this.itemOfPage = size;
            this.getTeacherData();
        },
        // 页面序号修改
        handlePageChange(index) {
            this.currentPage = index;
            this.getTeacherData();
        }        
    }
};
</script>

<style>
.hide .el-upload--picture-card {
    display: none;
}
.handle-box {
    height: 30px;
    margin-bottom: 20px;
}
.btn-add {
    float: right;
}
.table {
    margin: 10px;
}
</style>
